<template>
	<view>
		<uni-list>
			<!-- 申请原因 -->
			<uni-list-item :title="'申请' + status[order.rstatus-1]"/>
			<!-- 保修单编号 -->
			<uni-list-item title="报修单编号" :rightText="order.rid" />
			<!-- 维修问题说明 -->
			<uni-list-item :title="order.rcontent" />
			<!-- 报修图片 -->
			<uni-list-item title="报修图片" />
			<view v-for="item in order.user_img">
				<image :src="item"></image>
			</view>
			<!-- 报修完成图片 -->
			<uni-list-item v-if="order.rstatus != 1" title="修理图片" />
			<view v-if="order.rstatus != 1" v-for="item in order.repairer_img">
				<image :src="item"></image>
			</view>
			<!-- 校区 -->
			<uni-list-item v-if="order.rarea===0" title="校区" rightText="广州校区东校园" />
			<uni-list-item v-if="order.rarea===1" title="校区" rightText="广州校区北校园" />
			<uni-list-item v-if="order.rarea===2" title="校区" rightText="广州校区南校园" />
			<uni-list-item v-if="order.rarea===3" title="校区" rightText="深圳校区" />
			<uni-list-item v-if="order.rarea===4" title="校区" rightText="珠海校区" />
			<!-- 预约时间 -->
			<uni-list-item title="预约时间" :rightText="order.rtime" />
			<!-- 期望解决时间 -->
			<!-- <uni-list-item title="期望解决时间" :rightText="order.datetimesingle" /> -->
			<!-- 校区 -->
			<uni-list-item title="校区" :rightText="order.rarea" />
			<!-- 详细地址 -->
			<uni-list-item title="详细地址" :rightText="order.raddress" />
			<!-- 报修人编号 -->
			<uni-list-item title="报修人ID" :rightText="order.user_id" />
			<!-- 报修人姓名 -->
			<uni-list-item title="报修人姓名" :rightText="user.uname" />
			<!-- 报修人电话 -->
			<uni-list-item title="报修人电话" :rightText="user.uphone" />
			<!-- 维修人员编号 -->
			<uni-list-item v-if="order.rstatus != 1" title="维修人员编号" :rightText="order.repairer_id" />
			<!-- 维修人员姓名 -->
			<uni-list-item v-if="order.rstatus != 1" title="维修人员姓名" :rightText="worker.uname" />
			<!-- 维修人员电话 -->
			<uni-list-item v-if="order.rstatus != 1" title="维修人员电话" :rightText="worker.uphone" />
		</uni-list>
		
		<!-- 申请分派 -->
		<view v-if="order.rstatus===1">
			<!-- 选择框 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择的维修人员
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="defaultWorker" :range="repairer">
						<view class="uni-input">{{repairer[defaultWorker]}}</view>
					</picker>
				</view>
			</view>
			<!-- 驳回原因 -->
			<uni-forms-item label="驳回请求原因">
				<uni-easyinput type="textarea" v-model="reason" placeholder="请输入驳回请求的原因(接受请求可不填)" />
			</uni-forms-item>
			<!-- 按钮区域 -->
			<view class="button">
				<button type="primary" plain="true" @click="distribute">分派任务</button>
				<button type="primary" plain="true" @click="over_order">驳回申请</button>
			</view>
		</view>
		
		<!-- 申请重新分派 -->
		<view v-if="order.rstatus===2">
			<!-- 选择框 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					当前选择的维修人员
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="defaultWorker" :range="repairer">
						<view class="uni-input">{{repairer[defaultWorker]}}</view>
					</picker>
				</view>
			</view>
			<!-- 结单原因 -->
			<uni-forms-item label="对维修人员/用户说">
				<uni-easyinput type="textarea" v-model="reason" placeholder="若重分派任务,请输入对维修人员的指示;若结单,请输入结单原因" />
			</uni-forms-item>
			<!-- 按钮区域 -->
			<view class="button">
				<button type="primary" plain="true" @click="distribute">重新分派任务</button>
				<button type="primary" plain="true" @click="over_order">结单</button>
			</view>
		</view>
		
		<!-- 申请结单 -->
		<view v-if="order.rstatus===4">
			<!-- 返修原因 -->
			<uni-forms-item label="返修原因">
				<uni-easyinput type="textarea" v-model="reason" placeholder="请输入返修的原因(接受结单请求可不填)" />
			</uni-forms-item>
			<!-- 按钮区域 -->
			<view class="button">
				<button type="primary" plain="true" @click="over_order">结单</button>
				<button type="primary" plain="true" @click="back">退回返修</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data() {
			return {
				order :{
					rid: 10001,  //保修单序号
					rarea: '珠海校区',  //校园
					raddress: '中山大学珠海校区荔园7号-223',  //详细地址
					rcontent: "维修信息描述1",  //报修详情
					rtime: '2022-10-6 15:31:06',  //预约时间
					repairer_id: 0,  //维修人员编号
					user_id: 10001,  //报修人编号
					rstatus: 1,  //状态
					repairer_img: ["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"],  //完成图片
					user_img: ["https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"],  //报修图片
					user_rstatus: 2,  //用户权限
					repairer_rstatus: 0  //维修人员权限？
				},
				repairer: [],
				user: {
					uid: 10001,
					uname: "武磊",
					uphone: "18923042418",
					ulevel: 1
				},
				status: ['分派', '重新分派', '', '结单'],
				worker: {},
				defaultWorker: 0,
				reason: ''
			}
		},
		onReady() {},
		onLoad(options) {
			let data = JSON.parse(options.order);
			console.log(data.rid)
			this.order = data
			
			uni.request({
				url:"http://localhost:8081/user/find_repairer",
				method:"GET",
				success: (res) => {
					let data = res.data.data;
					console.log(data.length);
					for(let i = 0; i < data.length; i++) {
						this.repairer.push(data[i].uname);
					}
				}
			})
			
			uni.request({
				url: "http://localhost:8081/user/selectByUid?uid=" + this.order.user_id,
				method:"GET",
				success: (res) => {
					let data = res.data.data;
					console.log(res.data.data);
					this.user = res.data.data
				}
			})
			
			uni.request({
				url: "http://localhost:8081/user/selectByUid?uid=" + this.order.repairer_id,
				method:"GET",
				success: (res) => {
					let data = res.data.data;
					console.log(res.data.data);
					this.worker = res.data.data
				}
			})
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.defaultWorker = e.detail.value
			},
			distribute() {
				//POSR()
				uni.request({
					url: "http://localhost:8081/repair/distribute?rid=" + this.order.rid + "&uid=" + this.defaultWorker,
					method: "POST",
				})
				uni.navigateBack({
					delta: 1
				});
			},
			over_order() {
				//POST()
				uni.navigateBack({
					delta: 1
				});
			},
			back() {
				//POST()
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.button{
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
	}
	.uni-list {
		background-color: #FFFFFF;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		margin-right: 20rpx;
		margin-bottom: 30rpx;
	}
	.uni-list-cell-left {
	    white-space: nowrap;
		font-size:28rpx;
		padding: 0 30rpx;
	}
</style>